import React from 'react';
import type { ComponentType } from 'react';

import SemanticPreview from './SemanticPreview';
import useLocale from '../../hooks/useLocale';

interface SelectSemanticTemplateProps {
  component: ComponentType<any>;
  componentName: string;
  [key: string]: any;
}

const locales = {
  cn: {
    root: '根节点',
    popup: '弹出层',
    selector: '选择器',
    selection: '已选择项',
    clear: '清除按钮',
    arrow: '箭头',
  },
  en: {
    root: 'Root element',
    popup: 'Popup layer',
    selector: 'Selector',
    selection: 'Selected item',
    clear: 'Clear button',
    arrow: 'Arrow',
  },
};

const SelectSemanticTemplate: React.FC<SelectSemanticTemplateProps> = ({
  component: Component,
  componentName,
  ...restProps
}) => {
  const [locale] = useLocale(locales);

  return (
    <SemanticPreview
      componentName={componentName}
      semantics={[
        { name: 'root', desc: locale.root, version: '5.4.0' },
        { name: 'popup', desc: locale.popup, version: '5.4.0' },
        { name: 'selector', desc: locale.selector, version: '5.4.0' },
        { name: 'selection', desc: locale.selection, version: '5.4.0' },
        { name: 'clear', desc: locale.clear, version: '5.4.0' },
        { name: 'arrow', desc: locale.arrow, version: '5.4.0' },
      ]}
    >
      <Component {...restProps} />
    </SemanticPreview>
  );
};

export default SelectSemanticTemplate;

